import SwiftUI struct MapEdges: View { let mapSize: CGSize let lineWidth: CGFloat let vertexSize: CGSize let edges: [MapEdge] let arrowheadSize = CGFloat(10.0) var body: some View { ForEach(edges, id: \.id) { edge in Path { path in // First we transform edges from percentage to map coordinates let origin = CGPoint(x: w(edge.origin.x), y: h(edge.origin.y)) let destination = CGPoint(x: w(edge.destination.x), y: h(edge.destination.y)) let slope = (destination.y - origin.y) / (destination.x - origin.x) let angle = atan(slope) let multiplier = CGFloat(slope < 0 ? -1.0 : 1.0) let upperAngle = angle - CGFloat.pi / 4.0 let lowerAngle = angle + CGFloat.pi / 4.0 let offsetOrigin = CGPoint( x: origin.x + multiplier * (vertexSize.width / 2.0) * cos(angle), y: origin.y + multiplier * (vertexSize.height / 2.0) * sin(angle)) let offsetDestination = CGPoint( x: destination.x - multiplier * (vertexSize.width / 2.0) * cos(angle), y: destination.y - multiplier * (vertexSize.height / 2.0) * sin(angle)) path.move(to: offsetOrigin) path.addLine(to: offsetDestination) if edge.arrowhead { path.move(to: offsetDestination) path.addLine( to: CGPoint( x: offsetDestination.x - multiplier * arrowheadSize * cos(upperAngle), y: offsetDestination.y - multiplier * arrowheadSize * sin(upperAngle))) path.move(to: offsetDestination) path.addLine( to: CGPoint( x: offsetDestination.x - multiplier * arrowheadSize * cos(lowerAngle), y: offsetDestination.y - multiplier * arrowheadSize * sin(lowerAngle))) } path.move(to: offsetDestination) path.closeSubpath() }.applying( CGAffineTransform(translationX: vertexSize.width / 2.0, y: vertexSize.height / 2.0) ).stroke(Color.map.vertexColor, lineWidth: lineWidth) } } func h(_ dimension: CGFloat) -> CGFloat { max(0.0, min(mapSize.height, dimension * mapSize.height / 100.0)) } func w(_ dimension: CGFloat) -> CGFloat { max(0.0, min(mapSize.width, dimension * mapSize.width / 100.0)) } } #Preview { MapEdges( mapSize: CGSize(width: 400.0, height: 400.0), lineWidth: 1.0, vertexSize: CGSize(width: 25.0, height: 25.0), edges: [ MapEdge( id: 1, origin: CGPoint(x: 2.0, y: 34.0), destination: CGPoint(x: 23.0, y: 76.2), arrowhead: true) ]) }